<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			#daohang{
				width: 375px;
				margin: 0 auto;
				height: 50px;
				background-color: white;
				box-shadow: 0px 5px 5px #e7e7e7;
			}
			#daohang .fanhui{
				float: left;
				margin-top: 15px;
				margin-left: 10px;
			}
			#daohang h4{
				float: left;
               line-height: 40px;
               margin-left: 150px;
			}
			#shue{
				width: 375px;
				margin: 0 auto;
				position: relative;
				height: 150px;
				text-align: center;				
			}
			#shue h1{
				line-height: 150px;
			}
			#shue h5{
				position: absolute;
				top: 70px;
				left: 225px;
			}
			#xuanze{
				margin: 0 auto;
				width: 375px;
				height: 250px;
			}
			#xuanze1{
				width: 90px;
				height: 90px;
				background-color: white;
				float: left;
				margin-left: 27px;
				margin-top: 27px;
				border-radius: 10px;
				text-align: center;
			}
			#xuanze1 h2{
				line-height: 80px;
			}
			#shuru{
				width: 375px;
				margin: 0 auto;
				height: 70px;
				margin-top: 20px;
			}
			#shuru h4{
				margin: 0 10px;
			}
			#shuru input{
				width: 355px;
				margin-left: 10px;
				margin-bottom: 0;
				margin-top: 10px;
				border-radius: 300px;
				box-shadow: 0px 5px 5px #e7e7e7;
				border: hidden;
			}
			#biaoqian{
				width: 375px;
				margin: 0 auto;
				height: 60px;
				background-color: white;
				margin-top: 62px;
				box-shadow: 0px -5px 5px #e7e7e7;
				text-align: center;
			}
			#biaoqian h4{
				line-height: 55px;
			}
		</style>
	</head>

	<body>
		<div id="daohang">
			<img class="mui-action-back fanhui" src="img/FANHUIHEI.png"/>
			<h4>充值</h4>
		</div>
		<div id="shue">
			<h1>0.00</h1>
			<h5>元</h5>
		</div>
		<div id="xuanze">
			<div id="xuanze1">
				<h2>5元</h2>
			</div>
			<div id="xuanze1">
				<h2>10元</h2>
			</div>
			<div id="xuanze1">
				<h2>20元</h2>
			</div>
			<div id="xuanze1">
				<h2>30元</h2>
			</div>
			<div id="xuanze1">
				<h2>40元</h2>
			</div>
			<div id="xuanze1">
				<h2>50元</h2>
			</div>
		</div>
		<div id="shuru">
			<h4>自行输入金额</h4>
			<input type="text" name="" id="" value="" />
		</div>
		<div id="biaoqian">
			<h4>确认充值</h4>
		</div>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			var chongzhi=document.getElementById('biaoqian');
			chongzhi.addEventListener('tap',function(){
				mui.openWindow({
					url:"shenggong.html",
					id:"shenggong.html"
				});
			})
		</script>
	</body>

</html>